<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_2_固定定位广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /* 使用固定定位 */
            position: fixed;
            top:0;
            /* 设置宽度为视口（view port）宽度的100% */
            width: 100vm;
        }
        .main {
            /* 让内容向下一点 不然会遮住部分文字 */
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
        }
        .right {
            background-color: #F35336;

        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio eos, eveniet illo iusto laboriosam maiores
        nam nemo quia quod repellendus suscipit totam voluptatibus? Accusantium aliquam architecto delectus deleniti
        harum itaque.
    </div>
    <div>Aperiam commodi culpa, dignissimos eaque harum hic in neque nesciunt, nihil, officiis possimus saepe sequi sit?
        Atque cumque eum illum incidunt quos, rem sapiente. Amet cumque eos harum iste nam?
    </div>
    <div>A accusantium aut consectetur dicta et hic, incidunt iure laborum modi natus nostrum odit officia omnis
        perferendis quas quos repellat reprehenderit rerum similique voluptates! At eos illum impedit iste velit?
    </div>
    <div>Ad commodi culpa est hic impedit, in maxime nisi quod quos repellat vel veritatis vitae! Aliquam asperiores
        assumenda dolores facere maxime nihil, obcaecati sequi? Animi cum illum quod sed sit.
    </div>
    <div>A ab atque beatae cum dignissimos distinctio ea, eaque exercitationem fugiat illum incidunt maxime molestias
        nam nesciunt optio qui ratione recusandae sapiente sed temporibus totam veniam voluptatibus. Cum nesciunt,
        repellendus!
    </div>
    <div>Cumque distinctio impedit laborum porro possimus qui quis rem unde? A accusantium alias architecto, assumenda
        cupiditate distinctio dolores dolorum eligendi, et harum libero molestiae nostrum, porro ullam voluptas!
        Architecto, aut.
    </div>
    <div>Aliquam ipsa iste modi molestiae sit! Fugiat harum ipsam magnam maiores necessitatibus neque obcaecati officiis
        quisquam saepe? Facere in ut velit. Blanditiis, possimus quia quo sed tempore totam vel vitae?
    </div>
    <div>Atque dolores earum ex iusto laborum minima molestiae porro repellendus! Nihil obcaecati officiis quaerat
        veritatis? Animi, architecto consequatur corporis eius fuga impedit laudantium, nobis, possimus quaerat repellat
        saepe similique tempora?
    </div>
    <div>Ab amet aperiam cumque distinctio, dolorum eius fugit in inventore, ipsa molestias possimus quo quod sed sunt
        voluptatem? Amet delectus dolore harum, quod reiciendis totam vel? Eligendi enim impedit incidunt!
    </div>
    <div>Aspernatur corporis esse facere facilis fuga illo inventore magni quidem, quod voluptates? Ab assumenda cum
        dicta dolore ex fuga illo, maiores minus neque non omnis ut vel vitae. Delectus, vitae!
    </div>
    <div>Aut esse est harum iusto natus officiis quam quibusdam sequi sunt tenetur. Ab commodi consectetur, cupiditate
        eligendi est harum illum laboriosam minus perspiciatis provident recusandae tempore voluptatibus. Expedita
        necessitatibus, numquam.
    </div>
    <div>A accusamus accusantium animi architecto assumenda aut dicta dolore doloribus fugiat in iste minima molestias
        nam necessitatibus non officiis, praesentium quaerat quod rem repellat similique sit vel veniam? Sed,
        voluptates.
    </div>
    <div>Autem deserunt dicta earum, eos harum hic id impedit iste itaque iure laudantium magni minima necessitatibus
        nemo nostrum, officia optio placeat quas qui reprehenderit sed similique sint sit ut voluptas.
    </div>
    <div>Aliquid consequatur culpa error esse fugiat id, illum magni nesciunt non quis repellat sapiente sunt unde vitae
        voluptas! Accusamus animi asperiores corporis excepturi inventore itaque porro possimus sequi similique
        voluptate.
    </div>
    <div>A alias amet asperiores consectetur dolores nisi quia saepe. Adipisci at autem blanditiis consequuntur cum,
        dicta ex ipsam laudantium nam officiis porro quas, quo sequi sit tenetur velit vero vitae?
    </div>
    <div>A asperiores debitis esse, ipsa iste maiores minus non numquam obcaecati omnis perspiciatis placeat qui quos
        vel vitae voluptas voluptate. Beatae et, exercitationem fugit itaque labore laborum minima perferendis
        similique!
    </div>
    <div>Autem cum delectus, dicta dignissimos ducimus ea eligendi excepturi expedita nisi officia quas qui recusandae
        repellendus ut, veritatis? Ad architecto libero saepe? Dolorem impedit optio quasi quibusdam quis tempore
        voluptas?
    </div>
    <div>Ad adipisci alias amet dolores doloribus ipsa labore laborum non repellendus voluptas. Accusamus, blanditiis
        consectetur distinctio dolore exercitationem explicabo iusto maxime modi nesciunt nostrum obcaecati pariatur
        possimus quos reiciendis voluptate!
    </div>
    <div>Aspernatur atque autem, delectus, deleniti ducimus eaque earum error esse ex facilis id illum laudantium nam
        necessitatibus neque non nulla officia omnis quaerat quibusdam quod soluta veritatis vero. Consectetur, rem.
    </div>
    <div>Amet aperiam autem, corporis, doloribus dolorum enim fuga hic impedit inventore ipsam iure minus mollitia nihil
        omnis quaerat quam quas qui quos repudiandae sed soluta tempora ut vel voluptate, voluptatibus?
    </div>
    <div>Ad facilis nam nobis quisquam voluptate? Dolore enim exercitationem facere id minus nam natus tempore. Cum esse
        iste pariatur? Aspernatur at consequatur, esse exercitationem inventore iusto quisquam quos temporibus ut!
    </div>
    <div>Ab consectetur dolores hic id incidunt itaque, minima minus obcaecati rem sit tempore, tenetur voluptas
        voluptatibus? Accusamus, accusantium deserunt dolores excepturi incidunt ipsam molestiae possimus ratione
        recusandae similique. Amet, commodi?
    </div>
    <div>Eius ex fugit hic obcaecati reprehenderit sit veniam voluptatibus! Amet cumque est facilis ipsa porro. Aperiam
        dolorum fugit id sapiente voluptate! Hic impedit, ipsa non quia quis recusandae sit tempora.
    </div>
    <div>A ad amet animi aperiam architecto aspernatur autem dolore dolores doloribus earum eius excepturi explicabo
        facilis hic inventore nihil odio officia quaerat quam quis ratione sit tenetur unde, velit voluptas.
    </div>
    <div>Autem beatae commodi ducimus fugiat id iure, nihil nisi nulla praesentium ratione, soluta suscipit velit
        veritatis. Blanditiis nihil omnis porro voluptatum. Ab commodi corporis eius officia omnis, possimus tempora
        vitae.
    </div>
    <div>Amet distinctio dolorem, ducimus eius esse excepturi explicabo facilis impedit laudantium libero maxime, minima
        molestiae natus quia quidem quisquam quod sint tempora vel vitae! Dicta odio, ratione? Debitis, exercitationem,
        quidem!
    </div>
    <div>Ab beatae dignissimos hic placeat quo similique voluptate! Ad adipisci assumenda, consequuntur cumque dolorum
        eaque eos esse ex id, ipsum maiores nisi officia porro recusandae sed ut vitae voluptas voluptatem!
    </div>
    <div>Aperiam asperiores corporis doloremque eum ex facere harum id illum ipsam ipsum iste iusto labore maxime
        molestiae mollitia natus neque numquam porro qui recusandae rem repellat, sed sequi sit voluptates.
    </div>
    <div>Aliquam culpa explicabo facere nihil quo reiciendis rem sunt, vel veniam vitae. Commodi fugiat, unde. Aperiam
        corporis cumque explicabo impedit rerum. Aperiam, consectetur distinctio est ex nesciunt officia omnis sed.
    </div>
    <div>Aliquid amet, atque beatae, consequatur corporis delectus et libero minus, molestiae nam obcaecati quae
        quibusdam repellat saepe sequi. Assumenda beatae mollitia nulla recusandae reiciendis, repellat! Culpa ex ipsum
        molestias totam!
    </div>
    <div>Ab aliquid amet, cupiditate earum, id illum laudantium nesciunt numquam odio officia officiis tempora
        temporibus vero! Facilis, magnam ullam. Aliquam autem culpa deserunt, exercitationem fugiat fugit perferendis
        perspiciatis tempore voluptatem!
    </div>
    <div>Enim esse, libero mollitia obcaecati quidem rem voluptates! Commodi doloremque facilis ipsam itaque laboriosam
        nihil reiciendis saepe sed sunt voluptas? Impedit, pariatur, reiciendis? Ab ipsa iure obcaecati perspiciatis
        praesentium tempore.
    </div>
    <div>Architecto itaque mollitia provident, quasi reprehenderit saepe sed sit tenetur! Atque distinctio dolore,
        doloribus eveniet expedita fugit id minima natus nihil nisi optio quas quasi quos reiciendis reprehenderit saepe
        voluptates!
    </div>
    <div>Mollitia nam nesciunt numquam recusandae. Cum eos esse impedit laudantium nesciunt non quaerat, quam quasi
        reprehenderit? Aliquam autem dolorem laborum maiores, maxime, minus nulla omnis praesentium, quae quia
        reprehenderit saepe?
    </div>
    <div>Aperiam delectus ipsa, nemo quae quis reiciendis sapiente. Beatae blanditiis cupiditate exercitationem in nihil
        odit quam quisquam sunt? Blanditiis consequatur dolorum eos molestiae obcaecati rem sunt? Eos fuga
        necessitatibus quaerat.
    </div>
    <div>Ad asperiores blanditiis consequuntur corporis cum dolorem doloribus excepturi expedita explicabo minus
        molestiae neque obcaecati officiis placeat qui, quidem sint sit soluta ullam unde voluptas voluptate voluptatum.
        Maiores, neque, possimus.
    </div>
    <div>Ad animi architecto delectus dignissimos distinctio dolorem ducimus eos error et explicabo illum impedit, ipsa
        ipsam ipsum itaque iure nesciunt nisi non nostrum porro possimus quibusdam, sed sequi similique vitae.
    </div>
    <div>Aliquid aperiam aut, consequuntur dicta dolor earum fugit maxime nesciunt, perferendis quibusdam recusandae
        sequi soluta veritatis? Adipisci corporis, culpa cumque, delectus, doloremque eaque eligendi ex natus nisi
        provident repellendus voluptas.
    </div>
    <div>Deserunt ducimus earum nam. Cum dolorem dolores ducimus error impedit odit quis voluptatum. Aliquam deserunt
        iste maiores! Ab accusamus, accusantium alias architecto at expedita molestiae possimus temporibus ut vitae
        voluptates!
    </div>
    <div>Aut autem consequatur cumque, delectus doloremque eveniet id itaque mollitia natus nihil non veniam! Alias
        culpa ea, facere hic illum quaerat quos tempora? Eos ex iusto nemo sint vel voluptatum!
    </div>
    <div>Corporis esse est excepturi inventore laboriosam nobis. Aspernatur facere id incidunt labore nesciunt quibusdam
        rerum vel veritatis. Aut blanditiis cupiditate, exercitationem, ipsa iure possimus reprehenderit sapiente
        tempore unde, veniam voluptatibus?
    </div>
    <div>Architecto dolores dolorum eveniet laboriosam maiores molestias, odit perferendis. Assumenda deserunt,
        explicabo ipsam nisi ratione repudiandae. Accusamus aliquid consequuntur dolore eaque est, illum iusto
        laboriosam magni, praesentium qui suscipit vitae!
    </div>
    <div>Architecto assumenda deserunt distinctio dolor doloremque ea ipsam nulla numquam quam, sunt? Accusamus aliquam,
        animi architecto delectus, dignissimos dolorum eveniet explicabo ipsum iure laborum nisi perferendis ratione
        repudiandae, sit vitae.
    </div>
    <div>Aliquid aut, culpa dolore eos, ex explicabo facere labore minima nostrum placeat possimus praesentium quis
        repudiandae saepe sapiente vero voluptatibus. Et facere fugiat nihil placeat. Aspernatur atque porro reiciendis
        repellat.
    </div>
    <div>Aut consectetur dicta doloribus eligendi expedita hic illo illum ipsam laudantium nostrum perferendis possimus
        rem, ut. Eaque earum eligendi iste iusto libero nam officia quidem quis unde vitae? Optio, voluptatum!
    </div>
    <div>Aut consectetur cupiditate distinctio est excepturi hic laudantium, maxime minus mollitia natus nobis
        perferendis rem repellendus reprehenderit repudiandae sapiente similique tempore totam ullam velit? Dolorum
        ducimus iusto minus obcaecati quidem.
    </div>
    <div>Ad cum deleniti doloribus harum, iure minus nihil placeat ratione repellat voluptatum. Animi aut corporis
        cupiditate minus porro sed, ullam unde velit veniam voluptatum. Cupiditate iste minus tempore vel vero.
    </div>
    <div>Asperiores doloribus exercitationem iure nesciunt quibusdam. Assumenda, cupiditate deleniti dignissimos et nemo
        odio odit optio qui quia repellendus. Dicta, dolor explicabo iste libero minus molestias placeat quidem quo
        suscipit tempore.
    </div>
    <div>Accusamus adipisci aliquid cumque, incidunt ipsum, labore laborum nulla numquam perspiciatis quis similique
        sint soluta veniam? Ad aliquam animi consequuntur culpa delectus eius, iste mollitia nemo nesciunt odio
        recusandae voluptatem!
    </div>
    <div>A alias autem cumque cupiditate eaque, ipsam repudiandae! Debitis ex expedita quod. Architecto, consectetur
        deserunt dolorem inventore nisi reiciendis voluptatibus? Delectus distinctio dolor exercitationem facere minima
        sint sit? Aliquam, excepturi.
    </div>
    <div>Commodi dignissimos eaque excepturi laboriosam sed! Est eveniet quam quis, quisquam quod repellendus ut.
        Architecto deserunt, fuga inventore molestiae nesciunt nihil nisi pariatur perferendis praesentium quam rem,
        sed, sint voluptates!
    </div>
    <div>Ab debitis esse id magnam minus optio quae quas quis repudiandae sunt. Architecto autem dolorem, eum
        exercitationem facilis inventore iure, magni, omnis porro quo repudiandae sed voluptate. A, eveniet, vitae.
    </div>
    <div>Ab ad amet consectetur culpa cupiditate debitis deserunt ducimus enim esse eveniet ex explicabo hic id in ipsa
        iste nesciunt, officiis pariatur quidem, quisquam quo quos recusandae sunt tempora, vitae?
    </div>
    <div>Aspernatur libero, quasi. Deserunt fugiat nostrum omnis? Animi corporis eius eos facilis neque obcaecati
        repellat tempore veritatis. At blanditiis, dolores dolorum explicabo inventore quod tempore velit! Eos ipsa
        molestias nisi!
    </div>
    <div>Architecto aspernatur commodi dignissimos eaque earum eos facilis illum ipsam, ipsum, iste libero magni neque
        obcaecati odio optio recusandae, sit tempora totam veniam voluptas. At dolore id omnis praesentium quo.
    </div>
    <div>Cum deserunt, dolor perspiciatis quos reiciendis veniam. Accusantium culpa est magnam minima, odio quaerat quis
        ratione tempora. Beatae ducimus eos fugiat hic id incidunt officiis, pariatur, quos ratione repudiandae
        voluptatibus!
    </div>
    <div>Adipisci autem, beatae debitis distinctio ducimus eum excepturi exercitationem facere iusto quia quisquam
        similique soluta sunt voluptate voluptatum? Odit quibusdam recusandae reiciendis tempore veniam! Animi nisi
        numquam optio unde voluptate.
    </div>
    <div>A ad alias animi delectus dignissimos dolore dolores doloribus exercitationem ipsum laborum minus, nam nemo
        nihil nisi non nulla obcaecati odio odit officia quam quo recusandae reiciendis rerum similique temporibus!
    </div>
    <div>Harum non quaerat voluptate voluptates. Ad delectus fuga nesciunt quaerat quibusdam. Amet blanditiis, corporis
        dolor dolorem ducimus id laudantium molestiae mollitia nulla odio quaerat quos, reiciendis voluptatem!
        Accusantium, placeat, quam.
    </div>
    <div>Delectus ducimus expedita fuga, ipsa nemo nulla optio perferendis sit veritatis? Adipisci culpa cumque ipsa
        perspiciatis repellat repellendus, voluptatibus. Ab aut dolor dolorem facere nobis qui recusandae sapiente
        voluptas, voluptatibus?
    </div>


</div>


</body>
</html>